<template>
  <div class="w-[90%] m-2 flex">
    <!-- 工程列表 -->
    <div class="bg-[#bdc3c7] w-[240px] p-2 rounded-sm shadow-sm shadow-slate-400">
      <div class="bg-[#34495e] h-10 pl-2 flex items-center gap-2 font-bold">
        <ListView theme="outline" size="16" fill="#fff" />
        <span class="text-sm">工程列表</span>
      </div>

      <!-- 单个工程 -->
      <router-link
        class="w-full rounded-sm py-2 pl-2 bg-[#16a085] flex items-center cursor-pointer gap-1 my-1 shadow-sm shadow-slate-400"
        :to="{ name: 'section.list', params: { id: proj.id } }"
        v-for="proj of projs"
        :key="proj.id">
        <Log theme="outline" size="16" fill="#fff" />
        <span class="text-white text-center text-sm">{{ proj.shortName }}</span>
      </router-link>
    </div>

    <!-- 右侧列表 -->
    <div>
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Log, ListView } from '@icon-park/vue-next'
import useProj from '@/composables/useProj'
import { useRoute } from 'vue-router'

const route = useRoute()
const { userId } = route.query

const { all: allProj, projs } = useProj()

async function init() {
  if (userId) {
    await allProj({ userId: +userId })
  } else {
    const userId = localStorage.getItem('userId')
    await allProj({ userId: +userId! })
  }
}

init()
</script>
